<!--答题设置-->
<template>
  <section class="answerSetting-config">
    <section>
      <el-collapse v-model="activeName" accordion @change="change">
        <el-collapse-item v-for="(item, i) in group" :key="i" class="set-card" :name="item.type">
          <template slot="title">
            <div class="myTitle">{{ item.name }}</div>
            <el-tag size="mini">{{ item.updTime ? '上次设置时间：' + item.updTime : '未设置' }} </el-tag>
          </template>
          <section class="card-inner">
            <el-form ref="form" label-width="320px" :label-position="labelPosition" :model="form">
              <el-form-item v-if="item.type === 'DTLX_MRLX' || item.type === 'DTLX_DTHD' || item.type === 'DTLX_SYMRLX'" :label="labrlList.name">
                <el-input v-model="form.name" readonly placeholder="请选择答题配置" style="width: 500px; margin-right: 20px" />
                <el-button type="primary" size="small" @click="handleChooseCourse(item.type)">选择答题配置</el-button>
              </el-form-item>
              <el-form-item :label="labrlList.title">
                <el-input v-model="form.title" placeholder="请输入答题标题" />
              </el-form-item>
              <el-form-item :label="labrlList.subtitle">
                <el-input v-model="form.subtitle" placeholder="请输入答题小标语" />
              </el-form-item>
              <el-form-item v-if="item.type === 'DTLX_MZLX' || item.type === 'DTLX_ZXDT'" label="每日作答次数上限" prop="racticeCount">
                <el-input
                  v-model.number="form.racticeCount"
                  placeholder="请输入每日答题次数"
                  :disabled="numberType"
                  style="width: 700px; margin-right: 20px"
                />
                <el-checkbox v-model="numberType">不限</el-checkbox>
              </el-form-item>
            </el-form>
            <Calendar v-if="item.type === 'DTLX_MZLX'" :set-type="setType" @updateTime="queryUpdateTime" />
            <el-button type="primary" style="margin-left: 520px" @click="handleComit(item)">
              确 定
            </el-button>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 每日一练 -->
    <el-dialog :close-on-click-modal="false" custom-class="live-dialog" :visible.sync="showSelectCourse" title="选择答题闯关" width="1200px" center>
      <choose-course :is-child="setType" v-if="showSelectCourse" :data-type="currType" @select="handleSubmit" />
      <!-- :course-classify="courseClassify" -->
      <div slot="footer" class="dialog-footer">
        <el-button type="default" style="padding: 10px 30px" @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 首页专项答题 -->
    <el-dialog :close-on-click-modal="false" custom-class="live-dialog" :visible.sync="showSelectActivity" title="选择答题活动" width="1200px" center>
      <choose-activity :is-child="setType" @select="handleSubmit1" />
      <div slot="footer" class="dialog-footer">
        <el-button type="default" style="padding: 10px 30px" @click="handleClose1">取 消</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { getDataByType, setDataByType, weekFocueUpdateTime, queryPageCourse } from '../api'
import Calendar from '../components/calendar'
import chooseCourse from '../components/chooseDaily.vue'
import chooseActivity from '../components/chooseActivity.vue'
export default {
  name: 'AnswerSetting',
  components: { Calendar, chooseCourse, chooseActivity },
  data() {
    return {
      loadingBtn: false,
      listQuery: {
        page: 1,
        limit: 10,
        name: ''
      },
      activeName: '',
      numberType: false,
      setType: 3,
      labrlList: {
        name: '',
        title: '',
        subtitle: ''
        // racticeCount: ''
      },
      form: {
        name: '',
        dataId: '',
        title: '',
        subtitle: ''
        // racticeCount: ''
      },
      labelPosition: 'left',
      weekConfigUpdateTime: {},
      group: [
        {
          name: '首页每日答题设置',
          type: 'DTLX_SYMRLX'
        },
        {
          name: '首页专项答题设置',
          type: 'DTLX_DTHD'
        },
        {
          name: '每日答题设置',
          type: 'DTLX_MRLX'
        },
        {
          name: '每周答题设置',
          type: 'DTLX_MZLX'
        },
        {
          name: '专项答题设置',
          type: 'DTLX_ZXDT'
        }

        // {
        //   name: '双人对战设置',
        //   list: [
        //     {
        //       code: 'ACTIVITY_SUCC_POINTS',
        //       name: '双人对战',
        //       error: '双人对战',
        //       type: 1,
        //       value: '',
        //       nameTime: '',
        //       loadingBtn: false
        //     }
        //   ]
        // },
        // {
        //   name: '四人赛设置',
        //   list: [
        //     {
        //       code: 'ACTIVITY_SUCC_POINTS',
        //       name: '四人赛',
        //       error: '四人赛',
        //       type: 1,
        //       value: '',
        //       nameTime: '',
        //       loadingBtn: false
        //     }
        //   ]
        // }
      ],
      dailyList: [],
      showSelectCourse: false,
      showSelectActivity: false,
      updTime: '',
      currType:''
    }
  },
  async created() {
    const loading = this.$loading({
      lock: true,
      text: '请稍后...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    // this.queryUpdateTime()
    // this.getdaily()
    // this.group.forEach((element) => {
    //   this.getSystemData(element)
    // })
    for (const i in this.group) {
      await this.getConfigData(this.group[i].type, i)
    }
    loading.close()
  },
  methods: {
    handleClose() {
      this.showSelectCourse = false
    },
    handleSubmit(item) {
      // console.log(item)
      this.selectItem = item
      this.handleClose()
      this.form.name = this.selectItem.courseName || this.selectItem.name
      this.form.dataId = this.selectItem.id
    },
    handleSubmit1(item) {
      this.selectItem = item
      this.handleClose1()
      this.form.name = this.selectItem.courseName || this.selectItem.name
      this.form.dataId = this.selectItem.id
    },
    handleClose1() {
      this.showSelectActivity = false
    },
    handleChooseCourse(type) {
      if (type === 'DTLX_DTHD') {
        this.showSelectActivity = true
      } else {
        this.currType=type
        this.showSelectCourse = true
      }
    },
    change(activeName) {
      if (!activeName) return
      const index = this.group.findIndex(val => {
        return val.type === activeName
      })
      this.getConfigData(activeName, index)
      // console.log(activeName)
      if (activeName === 'DTLX_MRLX') {
        this.labrlList.name = '每日答题'
        this.labrlList.title = '每日答题标题'
        this.labrlList.subtitle = '每日答题小标语'
      }else if(activeName === 'DTLX_SYMRLX'){
        this.labrlList.name = '首页每日答题'
        this.labrlList.title = '首页每日答题标题'
        this.labrlList.subtitle = '首页每日答题小标语'
      } else if (activeName === 'DTLX_MZLX') {
        this.labrlList.title = '每周答题标题'
        this.labrlList.subtitle = '每周答题小标语'
      } else if (activeName === 'DTLX_DTHD') {
        this.labrlList.name = '职工端首页专项答题'
        this.labrlList.title = '专项答题标题'
        this.labrlList.subtitle = '专项答题小标语'
      } else {
        this.labrlList.title = '专项答题标题'
        this.labrlList.subtitle = '专项答题小标语'
      }
    },
    getdaily(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        type: 'DTLX_MRLX'
      }
      return new Promise((resolve, reject) => {
        queryPageCourse(query)
          .then((response) => {
            this.listLoading = false
            const data = response.data.data.rows
            data.forEach((item) => {
              this.dailyList.push({
                id: item.id,
                name: item.name
              })
            })
          })
          .catch((error) => {
            this.listLoading = false
            reject(error)
          })
      })
    },
    queryUpdateTime() {
      weekFocueUpdateTime().then((res) => {
        if (res.data.code === '200') {
          this.weekConfigUpdateTime = res.data.data
        }
      })
    },
    handleComit(item) {
      if (this.numberType && (item.type === 'DTLX_MZLX' || item.type === 'DTLX_ZXDT')) {
        this.form['racticeCount'] = -1
      }
      // const params = JSON.stringify(this.form)
      return new Promise((resolve, reject) => {
        setDataByType({ configName: item.type, configValue: JSON.stringify(this.form) })
          .then((res) => {
            this.$message({
              title: '成功',
              message: '设置成功',
              type: 'success',
              duration: 1500
            })
            const index = this.group.findIndex(val => {
              return val.type === item.type
            })
            this.getSystemData(item, index)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    getSystemData(item, i) {
      return new Promise((resolve, reject) => {
        getDataByType({ name: item.type })
          .then((res) => {
            const data = res.data.data.configValue
            this.form = JSON.parse(data)
            this.group[i].updTime = res.data.data.updTime
            if (this.form.racticeCount === -1) {
              this.form.racticeCount = ''
              this.numberType = true
              this.disabled = true
            } else {
              this.numberType = false
            }
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    async getConfigData(type, i) {
      return new Promise((resolve, reject) => {
        getDataByType({ name: type })
          .then((res) => {
            try {
              this.form = JSON.parse(res.data.data.configValue)
              this.group[i].updTime = res.data.data.updTime
              if (this.form.racticeCount === -1) {
                this.form.racticeCount = ''
                this.numberType = true
                this.disabled = true
              } else {
                this.numberType = false
              }
            } catch (err) {
              // console.warn(err)
              // this.group[code].configValue = []
            }
            resolve()
          })
          .catch((error) => {
            resolve(error)
          })
      })
    }
  }
}
</script>
<style lang="scss">
.answerSetting-config {
 /* min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);*/
  overflow: hidden;
  background: #fff;
  .set-card {
    padding: 0 0 0 13px;
  }

  .myTitle {
    // background: #000;
    height: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    // line-height: 30px;
  }
  .el-tag {
    margin-left: 10px;
  }
  &::-webkit-scrollbar {
    width: 8px; /*对垂直流动条有效*/
    height: 1px; /*对水平流动条有效*/
  }

  /** 滚动条轨道*/
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-radius: 3px;
  }

  /** 滚动条里面小方块*/
  &::-webkit-scrollbar-thumb {
    height: 32px;
    border-radius: 5px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    background-color: #eaeaea;
  }

  &:hover {
    overflow: auto;
  }

  .set-info,
  .set-card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .el-collapse {
      border-top: none;
      border-bottom: none;

      .el-collapse-item__header {
        padding-left: 10px;
        border-bottom: none;
        overflow: hidden;
        text-overflow: ellipsis;

        .name {
          flex-shrink: 0;
          white-space: nowrap;
        }
      }

      .el-collapse-item__content {
        padding: 10px;
      }

      .el-collapse-item__wrap {
        border-bottom: none;
        border-top: 1px solid #e6ebf5;
      }
    }
  }

  .set-card {
    margin-top: 10px;
  }

  .set-info {
    .info-item {
      padding-bottom: 8px;
      vertical-align: top;
      display: flex;

      .item-label {
        color: rgba(0, 0, 0, 1);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5715;
        text-align: start;
      }

      .item-content {
        flex: 1 1;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        line-height: 1.5715;
        word-break: break-word;
        overflow-wrap: break-word;
      }
    }
  }

  .color-inner {
    display: flex;
    align-items: center;

    .inner-item {
      width: 25px;
      height: 25px;
      margin-right: 8px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      > i {
        display: none;
      }

      &.active i {
        display: inline-block;
      }
    }
  }
}
</style>
